<!DOCTYPE HTML>
<html>
<head>
    <title>
        售后退单详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
    <div class="detail-page span24">
        <div class="detail-page-title">
            <h4>售后退单详情
                <button type="button" id="cancel-list-btn" class=" pull-right jx-btn">返回</button>
            </h4>
        </div>
        <div class="detail-section">
            <div class="row detail-row">
                <div class="span24">
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4">售后订单基础信息</td>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">售后订单编号：</label>
                            </td>
                            <td>
                                6080240000608
                            </td>
                            <td width="150">
                                <label class="pull-right">售后类型：</label>
                            </td>
                            <td>退货退款
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label class="pull-right">订单号：</label>
                            </td>
                            <td>
                                6745764149713
                            </td>
                            <td>
                                <label class="pull-right">订单状态：</label>
                            </td>
                            <td>
                                待发货
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">售后状态：</label>
                            </td>
                            <td colspan="3">待审核
                                <button type="button" id="revokebtnShow" class="ml-10 pull-right button button-primary">
                                    撤销
                                </button>
                                <button type="button" id="refusebtnShow" class="ml-10 pull-right button button-primary">
                                    拒绝
                                </button>
                                <button type="button" id="passAuditbtnShow"
                                        class="ml-10 pull-right button button-primary">审核通过
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">申请时间：</label>
                            </td>
                            <td colspan="3">2038-01-19 11:14:00
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">售后备注：</label>
                            </td>
                            <td colspan="3">
                                <button type="button" id="remarksbtnShow" class="pull-right button button-primary">备注
                                </button>
                            </td>
                        </tr>
                    </table>                   
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4">
                            售后用户信息
                        </td>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">下单账号：</label>
                            </td>
                            <td>
                                15921172492
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">下单店铺名称：</label>
                            </td>
                            <td>
                                Nike官方旗舰店
                            </td>                            
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">商品级别：</label>
                            </td>
                            <td>试用版</td>                      
                        </tr>
                    </table>
                    <!-- 表格 start-->
                    <div>
                        <div class="grid-header"> 售后商品信息</div>
                        <div id="grid"></div>
                    </div>
                    <!-- 表格 end-->
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="2">
                            售后原因
                        </td>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">售后原因：</label>
                            </td>
                            <td> 缺货
                            </td>
                        </tr>
                        <!--  用户上传图片 -->
                        <tr>
                            <td width="150">
                                <label class="pull-right">图片：</label>
                            </td>
                            <td>
                                <img src="../../../assets/img/u9486.png" height="135" width="159">
                                <img src="../../../assets/img/u9486.png" height="135" width="159">
                                <img src="../../../assets/img/u9486.png" height="135" width="159">
                            </td>
                        </tr>
                    </table>                    
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="2">
                            付款信息
                        </td>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">支付类型：</label>
                            </td>
                            <td>
                                微信支付
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">支付通道：</label>
                            </td>
                            <td>
                                网页支付
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">交易号：</label>
                            </td>
                            <td>
                                471757615717401750715
                            </td>
                        </tr>
                    </table>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="2">
                            退款信息
                        </td>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">退款金额：</label>
                            </td>
                            <td>388
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 初始隐藏 passAuditDialog内容 -->
<div id="passAudit" class="hide">
    <form id="passAuditform" class="form-horizontal">
        <div class="row">
            <div class="control-group span8 offset2">
                <label class="control-label">
                    商品金额：</label>
                <div class="controls">
                        <span class="control-text">
                            395.00</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span8 offset2">
                <label class="control-label">
                    退款金额：</label>
                <div class="controls">
                    <input type="text" data-rules="{required:true,number:true}" class="input-normal control-text">
                </div>
            </div>
            <span class="grey offset5"> (注：可退金额不得高于商品金额)</span>
        </div>
    </form>
</div>
<!-- 初始隐藏 remakesDialog内容 -->
<div id="remarks" class="hide">
    <form class="form-horizontal">
        <div id="remarksform" class="row">
            <div class="control-group span12">
                <label class="control-label">备注：</label>
                <div class="control-row4 ">
                    <textarea class="input-large" type="text"></textarea>
                </div>
            </div>
            <span class="grey offset2"> 注：售后备注用户不可见</span>
        </div>
    </form>
</div>
<!-- 初始隐藏 refuseDialog内容 -->
<div id="refuse" class="hide">
    <form class="form-horizontal">
        <div id="refuseform" class="row">
            <div class="control-group span12">
                <label class="control-label">原因：</label>
                <div class="control-row4 ">
                    <textarea class="input-large" type="text"></textarea>
                </div>
            </div>
        </div>
    </form>
</div>
<!-- 初始隐藏 revokeDialog内容 -->
<div id="revoke" class="hide">
    <form class="form-horizontal">
        <div id="revokeform" class="row">
            <div class="control-group span12">
                <label class="control-label">留言：</label>
                <div class="control-row4 ">
                    <textarea class="input-large" type="text"></textarea>
                </div>
            </div>
        </div>
    </form>
</div>
<!-- 初始隐藏 salesLogDialog内容 -->
<div id="salesLog" class="hide">
    <form id="salesLogform" class="form-horizontal">
        <div class="row">
            <div class="control-group span12 offset2">
                <label class="control-label">
                    自定义订单号： </label>
                <div class="controls">
                    <input type="text" data-rules="{required:true,number:true}" class="input-normal control-text">
                </div>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/bootstrap.js"></script>
<script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../../assets/js/config-min.js"></script>
<script type="text/javascript">
    BUI.use('common/page');
</script>
<script type="text/javascript">
    BUI.use(['bui/grid', 'bui/data', 'common/search', 'bui/overlay', 'bui/form'], function (Grid, Data, Search, Overlay, Form) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                title: '商品货号',
                dataIndex: 'a',
                elCls: 'center', //居中
                width: 100
            }, {
                title: '商品等级',
                dataIndex: 'b',
                elCls: 'center', //居中
                width: 100
            }, {
                title: '商品系列',
                elCls: 'center',
                dataIndex: 'c',
                width: 100
            }, {
                title: '商品品牌',
                elCls: 'center',
                dataIndex: 'd',
                width: 200
            }, {
                title: '品类',
                elCls: 'center',
                dataIndex: 'e',
                width: 80
            }, {
                title: '项目',
                elCls: 'center',
                dataIndex: 'f',
                width: 100
            }, {
                title: '商品名称',
                elCls: 'center',
                dataIndex: 'g',
                width: 100
            }, {
                title: '颜色',
                elCls: 'center',
                dataIndex: 'h',
                width: 100
            }, {
                title: '规格',
                elCls: 'center',
                dataIndex: 'i',
                width: 100
            }, {

                title: '条形码',
                elCls: 'center',
                dataIndex: 'j',
                width: 100
            }, {

                title: '数量',
                elCls: 'center',
                dataIndex: 'k',
                width: 100
            },{

                title: '售后数量',
                elCls: 'center',
                dataIndex: 'l',
                width: 100
            }, {

                title: '供应价',
                elCls: 'center',
                dataIndex: 'm',
                width: 100
            },{

                title: '折扣规则',
                elCls: 'center',
                dataIndex: 'n',
                width: 100
            },{

                title: '会员折扣价',
                elCls: 'center',
                dataIndex: 'o',
                width: 100
            },{

                title: '均摊销售价',
                elCls: 'center',
                dataIndex: 'p',
                width: 100
            }],
            data = [{
                id: 1,
                a: 'CB054',
                b: 'B',
                c: '跑步系列',
                d: 'Nike',
                e: '鞋子',
                f: '跑步鞋',
                g: 'alphabounce',
                h: '统色',
                i: '7.5',
                j: '4.05728E+12',
                k: '1',
                l: '1',
                m: '899',
                n: '参与',
                o: '689',
                p: '689'
            }];

        //初始化数据
        var store = new Store({ //初始化数据
                data: data,
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table mb-20',
                columns: columns,
                loadMask: true, //加载数据时显示屏蔽层
                bbar: {
                    elCls: 'span24 offset7',
                    items: [{
                        // items:工具栏的项， 可以是按钮(bar-item-button)、 文本(bar-item-text)、 默认(bar-item)、 分隔符(bar-item-separator)以及自定义项 
                        xclass: 'bar-item-text',
                        text: '<div style=" ">均摊销售价 ＝ 商品会员折扣价 ＊ (订单人工减免 ／ 折后商品总额)</div>'
                    }]

                },
                store: store
            });
        grid.render();
        // //售后日志表格
        // var dialogStore = Data.Store,
        //     dialogcolumns = [{
        //         title: '售后状态',
        //         dataIndex: 'a',
        //         width: 100
        //     }, {
        //         title: '操作时间',
        //         dataIndex: 'b',
        //         width: 100
        //     }, {
        //         title: '备注',
        //         dataIndex: 'c',
        //         width: 200
        //     }, {
        //         title: '操作人',
        //         dataIndex: 'd',
        //         width: 100
        //     }],
        //     dialogdata = [{
        //         a: '申请时间',
        //         b: '2016-03-13 11:11:11',
        //         c: '',
        //         d: ''
        //     }];

        // var dialogstore = new dialogStore({
        //         data: dialogdata,
        //         autoLoad: true
        //     }),
        //     dialoggrid = new Grid.Grid({
        //         forceFit: true, // 列宽按百分比自适应
        //         elCls: 'small-bui-grid-table mb-20',
        //         columns: dialogcolumns,
        //         store: dialogstore
        //     });

        // //售后日志
        // var salesLogDialog = new Overlay.Dialog({
        //     title: '售后日志',
        //     width: 800,
        //     height: 400,
        //     //配置DOM容器的编号
        //     children: [dialoggrid],
        //     childContainer: '.bui-stdmod-body',
        //     success: function () {
        //         //点击成功时候操作

        //         //  this.close();
        //     }
        // });
        // $('#salesLogbtnShow').on('click', function () {
        //     salesLogDialog.show();
        // });
        var passAuditDialog = new Overlay.Dialog({
            title: '可退金额',
            width: 500,
            //配置DOM容器的编号
            contentId: 'passAudit',
            success: function () {
                //点击成功时候操作 
                var form = new Form.Form({
                    srcNode: '#passAuditform'
                }).render();
                form && form.submit();
                this.close();
            }
        });
        $('#passAuditbtnShow').on('click', function () {
            passAuditDialog.show();
        });
        //撤销
        var revokeDialog = new Overlay.Dialog({
            title: '撤销留言',
            width: 500,
            //配置DOM容器的编号
            contentId: 'revoke',
            success: function () {
                //点击成功时候操作
                this.close();
            }
        });
        $('#revokebtnShow').on('click', function () {
            revokeDialog.show();
        });
        //备注
        var remarksDialog = new Overlay.Dialog({
            title: '售后备注',
            width: 500,
            //配置DOM容器的编号
            contentId: 'remarks',
            success: function () {
                //点击成功时候操作
                this.close();
            }
        });
        $('#remarksbtnShow').on('click', function () {
            remarksDialog.show();
        });
        //拒绝
        var refuseDialog = new Overlay.Dialog({
            title: '拒绝原因',
            width: 500,
            //配置DOM容器的编号
            contentId: 'refuse',
            success: function () {
                //点击成功时候操作
                this.close();
            }
        });
        $('#refusebtnShow').on('click', function () {
            refuseDialog.show();
        });

        $("#cancel-list-btn").click(function () {
            top.topManager.closePage();
        });


    });
</script>

<body>

</html>
